<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('图片上传')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<style>
    body{
        background: rgb(250,250,240) !important;
        /*去掉竖直滚动条*/
        /*overflow-y: hidden;*/
        height: 100%;
    }
    .main-content{
        height: 100%;
    }
    #rowdo{
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
</style>
<body>
<div class="main-content">
    <form id="form-apply-add" class="form-horizontal">
        <input name="deptId" type="hidden" id="treeId"/>
        <h4 class="form-header h4">图片上传</h4>

        <div class="form-group">
            <!--<label class="col-xs-2 control-label">美好的时间，记录一下吧</label>-->
            <label class="col-xs-2 control-label"></label>
            <div class="col-xs-12 col-sm-12 col-md-12 .col-lg-12">
                <div class="ibox-content">
                    <div class="form-group">
                        <div class="file-loading" id="ap">
                            选择图片:<input id="txt_file" type="file" name="txt_file" multiple>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-sm-10 col-md-10 .col-lg-10" id="don">
<!--                    <button type="button" class="btn btn-sm btn-warning" style="width: 100%;height: 32px" onclick="donlog();"><i class="fa fa-reply-all"></i>图片下载</button>-->
                </div>
            </div>
        </div>
    </form>
</div>


<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/imgUpload";

    $(function() {
        loadImg();
        let va = $(".ap").val();
        console.log(va);
        // va.append("style = 'style:width: 100%;height: 40px;line-height: 30px;'")
        $(".ap").css('width: 100%');
    })

    function donlog(){
        $.operate.get(prefix + "/donlog");
    }

    function loadImg(){
        var url = prefix + '/uploadImageSave';
        $("#txt_file").fileinput({
            language: 'zh', //设置语言
            uploadUrl: url, //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg','WEBP','dfx','cdr','bmp','mp4','avi','swf','rm','mov','mpeg','mpg','html', 'txt', 'video', 'audio', 'flash', 'xlsx', 'pdf','xls'],//接收的文件后缀
            previewFileType: ['image', 'html', 'text', 'video', 'audio', 'flash', 'object', 'other'],//预览文件类型
            showUpload: false, //是否显示上传按钮
            showCaption: false,//是否显示标题
            showRemove: true,
            initialPreview: "",
            initialPreviewAsData: true,
            maxFilesNum: 5,
            showPreview : true, //是否显⽰预览
            maxFileSize: 0, //单位为kb，如果为0表⽰不限制⽂件⼤⼩
            browseClass: "btn btn-primary", //按钮样式
            enctype: 'multipart/form-data',
            uploadAsync: true,
            overwriteInitial: false,
            showClose: false,
            deleteUrl: '',
            initialPreviewConfig: "",
            maxFileCount: 200, //表示允许同时上传的最大文件个数
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            // dropZoneTitle: "上传图片640 * 350分辨率效果更好",

            previewSettings: {
                image: {width: "180px", height: "320px"},   // 这个配置就是解决办法了,初始化时限制图片大小
            }
        }).on('filepredelete', function(event, key, jqXHR, data) {

            if (!confirm("确定删除原文件？删除后不可恢复")) {
                // 删除的后台功能没有加。
                return true;
            } else {
                //array.push(key);
                //$('#array_idCard').val(array);
            }
        }).on('fileuploaded', function(event, data, previewId,index) {


        }).on('filesuccessremove',function(event,previewId,extra){
            console.log(previewId);
            console.log(extra);
        }).on('filebatchselected',function(event,data,id,index){
            $(this).fileinput("upload");
        }).on('filebatchuploadsuccess',function(event,data,previewId,index){

            window.location.reload();
        });
    }

</script>
</body>
</html>